<template>
  <s-layout title="商品管理">
    <view class="box">
      <view class="inpbox">
        <input
          type="text"
          v-model="user"
          placeholder="请输入商品名称"
          class="custom-input"
        />
        <span @click="userbtn">搜索</span>
      </view>
      <!-- <view style="background-color: #fff" class="w"
        ><uni-data-select
          v-model="countyId"
          :localdata="countyList"
          @change="changeCounty"
          placeholder="商品分类"
        ></uni-data-select
      ></view> -->
      <view class="container">
        <scroll-view
          class="scroll-view"
          scroll-y="true"
          @scrolltolower="onScrollToLower"
        >
          <view class="w" v-for="(item, index) in datalist" :key="index">
            <view class="item">
              <view
                ><image
                  style="width: 200rpx; height: 180rpx"
                  :src="item.albumPics"
                ></image
              ></view>
              <view style="margin-left: 20rpx">
                <view style="font-size: 24rpx; margin-bottom: 10rpx">{{
                  item.name
                }}</view>
                <span style="color: #ff6000">￥{{ item.price }}元</span>
                <view
                  style="
                    display: flex;
                    position: absolute;
                    right: 10rpx;
                    bottom: 10rpx;
                  "
                  ><view
                    class="shoopUp"
                    v-if="item.publishStatus == 0"
                    @click="shoopUp(item, 1)"
                    >上架</view
                  ><view
                    class="shoopUp"
                    style="background-color: #ff6000; color: #fff"
                    @click="shoopUp(item, 0)"
                    v-if="item.publishStatus == 1"
                    >下架</view
                  ></view
                >
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    <Boom :type="3"></Boom>
  </s-layout>
</template>
<script setup>
import { reactive, computed, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import sheep from "@/sheep";
import Boom from "./components/boom.vue";

const datalist = ref([]);

const parmes = ref({
  page: 0,
  size: 10,
});

const tishi = ref(true);

async function productList() {
  const data = await sheep.$api.order.productList(parmes.value, {
    search: user.value,
  });
  if (data.content.length < 10) {
    tishi.value = false;
  }
  datalist.value = [...datalist.value, ...data.content];
  console.log(datalist.value, "zhji");
  console.log(tishi.value, "tishi");
}
const shoopUp = async (item, status) => {
  console.log(status); //0下架，1上架
  console.log(item.id);
  // 使用 wx.showModal 弹出确认框
  uni.showModal({
    title: "确认操作", // 弹框标题
    content: "确定要下架这个商品吗？", // 弹框内容
    showCancel: true, // 是否显示取消按钮
    success: async (res) => {
      // 将 success 回调函数改为 async 函数
      if (res.confirm) {
        console.log("用户点击了“确定”按钮");

        // 在这里执行下架操作
        handleShoopUp(item, status);
      } else if (res.cancel) {
        console.log("用户点击了“取消”按钮");
      }
    },
  });
};

// 定义 handleShoopUp 函数
const handleShoopUp = async (item, status) => {
  try {
    const result = await sheep.$api.order.operateProduct({
      ids: item.id,
      status: status,
    });
    
    uni.showToast({
      title: status == 0 ? "下架成功" : "上架成功",
      icon: "none",
      duration: 2000,
    });
    
    // 添加刷新列表逻辑
    // 方案1：重新加载当前页面的数据
    parmes.value.page = 0;
    datalist.value = [];
    productList();
    
    // 或者方案2：直接更新当前商品的状态（更高效）
    // const index = datalist.value.findIndex(product => product.id === item.id);
    // if (index !== -1) {
    //   datalist.value[index].publishStatus = status;
    // }
    
    console.log("操作成功：", result);
  } catch (error) {
    console.error("操作失败：", error);
  }
};

const onScrollToLower = () => {
  if (tishi.value) {
    parmes.value.page = parmes.value.page + 1;
    productList();
  } else {
    uni.showToast({
      title: "已加载全部数据",
      icon: "none",
      duration: 2000,
    });
  }
};

const user = ref();

const userbtn = () => {
  console.log("userId:", user.value);
  parmes.value.page = 0;
  datalist.value = [];
  productList();
};

onLoad((options) => {
  productList();
});
</script>

<style lang="scss" scoped>
.box {
  height: 90vh;
  width: 100%;
  background-color: #f7f7f7;
  // background: linear-gradient(to bottom, #d7eafe, #e4f4fe);
  box-sizing: border-box;
}
.w {
  width: 94%;
  margin: auto;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
}
.container {
  width: 100%;
  height: 80vh; /* 设置容器高度 */
}
.scroll-view {
  width: 100%;
  height: 100%; /* 滚动视图的高度 */
}
.inpbox {
  padding: 20rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 10rpx;
}
.custom-input {
  border: none;
  /* 设置背景颜色为灰色 */
  background-color: #f7f7f7;
  box-sizing: border-box; /* 确保宽度包含内边距 */
  width: 600rpx;
  height: 60rpx;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding-left: 10rpx;
}
.item {
  height: 200rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 10rpx;
  display: flex;
  position: relative;
}
.shoopUp {
  width: 100rpx;
  border: 2rpx solid #ff6000;
  text-align: center;
  color: #ff6000;
  border-radius: 20rpx;
  margin-left: 20rpx;
}
</style>
